๐จ Canvas Mini Studio
Advanced Online Image Editor โ berbasis HTML5 Canvas, berjalan 100% di browser.
๐ Dokumentasi Fitur
Canvas Mini Studio adalah editor gambar online ringan yang berjalan sepenuhnya di browser menggunakan HTML5 Canvas dan JavaScript murni. Cocok untuk pelajar, guru, desainer pemula, dan siapa saja yang butuh mengedit gambar cepat tanpa instalasi.
โ๏ธ Crop
Potong area gambar dengan seleksi kotak. Drag untuk memilih area, tekan Enter untuk menerapkan.
๐๏ธ Kuas / Brush
Gambar bebas di atas kanvas dengan ukuran dan warna yang bisa disesuaikan.
๐งน Penghapus
Hapus bagian gambar atau goresan kuas dengan mudah.
๐ค Teks
Tambahkan teks langsung ke kanvas. Klik posisi yang diinginkan, ketik, lalu tekan Enter.
โฉ๏ธโช๏ธ Rotasi
Putar gambar 90ยฐ ke kiri atau kanan dengan satu klik.
โ๏ธโ๏ธ Flip
Cermin horizontal atau vertikal secara instan.
๐ Filter
Terapkan filter Grayscale, Sepia, Invert, Brightness, Contrast, dan Saturate.
๐ง Blur
Efek blur sederhana untuk menghaluskan area gambar.
๐ช Manajemen Layer
Tambah, hapus, sembunyikan, dan kelola beberapa layer gambar secara independen.
โชโฉ Undo/Redo
Batalkan atau ulangi hingga 50 langkah perubahan. Juga mendukung Ctrl+Z / Ctrl+Y.
Keunggulan
- 100% berjalan di browser โ data gambar tidak dikirim ke server.
- Tanpa instalasi, tanpa registrasi, gratis.
- Ringan & cepat, tanpa library eksternal.
- Mendukung keyboard shortcuts untuk power user.
- Responsive โ bisa digunakan di desktop, tablet, dan mobile.
Batasan
- Ukuran file maksimal 10MB.
- Filter blur menggunakan pendekatan sederhana (bukan Gaussian penuh).
- Layer disimpan di memori RAM browser โ akan hilang jika halaman di-refresh (kecuali auto-save aktif).
๐ Cara Penggunaan
- Memulai: Seret gambar ke area dropzone, atau klik tombol ๐ Buka di toolbar. Anda juga bisa paste gambar dari clipboard (Ctrl+V).
- Mengedit: Pilih alat dari toolbar (Crop, Brush, Eraser, Teks, dll). Sesuaikan ukuran kuas dan warna. Untuk filter, pilih dari dropdown Filter lalu klik tombol ๐ Filter.
- Mengelola Layer: Gunakan panel bawah untuk menambah layer baru, menyembunyikan, atau menghapus layer. Setiap layer bersifat independen.
- Export / Simpan: Klik ๐พ Simpan atau gunakan tombol format (PNG, JPG, WEBP) di panel bawah. File akan terunduh otomatis.
- Tips & Trik: Gunakan Ctrl+Z untuk undo, Ctrl+Y untuk redo, Ctrl+S untuk export cepat, Esc untuk membatalkan seleksi crop, dan Delete untuk menghapus layer aktif.
Troubleshooting
- Gambar tidak muncul? Pastikan format didukung (PNG/JPG/WEBP/SVG/BMP) dan ukuran < 10MB.
- Canvas terlihat kosong setelah filter? Klik Undo (Ctrl+Z) untuk membatalkan. Beberapa filter bersifat destruktif.
- Performa lambat? Kurangi resolusi gambar sebelum diedit.
๐ก Tips Pro: Gunakan kombinasi Crop โ Filter โ Export untuk workflow editing cepat. Aktifkan auto-save di localStorage agar pekerjaan tidak hilang saat refresh halaman.
๐ก Contoh Kasus Penggunaan
๐ธ Crop Foto Profil
Mengambil bagian wajah dari foto grup berukuran 4MB, crop menjadi kotak 500ร500px, lalu export sebagai JPG untuk dipasang di media sosial.
๐จ Konversi ke Grayscale
Mengubah foto berwarna menjadi hitam-putih untuk kebutuhan desain poster vintage. Satu klik filter Grayscale, lalu export PNG.
๐ Menambahkan Anotasi
Guru menambahkan teks penjelasan dan panah (brush) pada screenshot materi pelajaran sebelum dibagikan ke siswa via LMS.
๐ Sensor Data Pribadi
Menyensor (blur/brush hitam) nomor KTP dan alamat pada foto dokumen sebelum diunggah ke formulir online.
๐ Rotasi & Flip Scan Dokumen
Memperbaiki orientasi hasil scan dokumen yang terbalik dengan rotasi 180ยฐ (2ร putar kiri) lalu flip horizontal.